<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640, target-densitydpi=device-dpi, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>帮助图鉴</title>
</head>
<link rel="stylesheet" href="../../static/app/css/style.css">

<body>
<div id="app">
    <nav>
        <div class="slider">
            <ul id="slides" class="slides clearfix">
                <li><img class="responsive" src="../../static/app/images/one.png" alt="暂无图片"></li>
                <li><img class="responsive" src="../../static/app/images/two.png" alt="暂无图片"></li>
                <li><img class="responsive" src="../../static/app/images/three.png" alt="暂无图片"></li>
                <li><img class="responsive" src="../../static/app/images/four.png" alt="暂无图片"></li>
                <li><img class="responsive" src="../../static/app/images/five.png" alt="暂无图片"></li>
            </ul>
        </div>
        <div class="slider-circle">
            <ul class="box">
                <li><i class="circle check-this"></i></li>
                <li><i class="circle"></i></li>
                <li><i class="circle"></i></li>
                <li><i class="circle"></i></li>
                <li><i class="circle"></i></li>
            </ul>
        </div>
    </nav>
</div>
</body>
<script src="../../static/app/js/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var height = $("#app").height()
        $('#app').css({
            "position": "fixed",
            "top": '50%',
            "margin-top": -(height / 2) + "px"
        })
    }
    $(document).ready(function () {

        var len = $(".slider li").length - 1;
        //给slider设置样式

        $(".slider").css({
            "width": "100%",
            "height": "inherit",
            "overflow": "hidden",
            "display": "inline-block",
            "position": "relative",
        });

        //给ul设置宽度
        $(".slides").css({
            "position": "relative",
            "width": ((len + 1) * 100).toString() + "%",
            "margin": "0",
            "padding": "0"
        });
        //给li设置百分比宽度
        $(".slides li").css({
            "width": (100 / (len + 1)).toString() + "%",
            "float": "left",
            "text-align": "center"
        });
        //给图片设置宽度
        $(".responsive").css({
            "width": "95%",
            "height": "inherit"
        });
        //控制点样式
        $(".slider p").css({
            "position": "absolute",
            "z-index": "999",
            "cursor": "pointer"
        });
        $(".slider .lastpic").css({
            "left": "0",
            "margin-top": "7%"
        });
        $(".slider .nextpic").css({
            "right": "0",
            "margin-top": "7%"
        });
        //animate移动
        var i = 0;
        $(".nextpic").click(function () {
            moveNext(i);
        });
        $(".lastpic").click(function () {
            moveLast(i);
        });

        moveNext = function (n) {
            if (n == len) {
                return
            } else {
                $(".slider .slides").animate({
                    right: ((n + 1) * 100).toString() + "%"
                }, 300);
                $('.box li').eq(n + 1).children('i').addClass('check-this').parent().siblings().children('i').removeClass('check-this')
                i++;

            }
        }
        moveLast = function (n) {
            if (n == 0) {
                return
            } else {
                $(".slider .slides").animate({
                    right: ((n - 1) * 100).toString() + "%"
                }, 300);
                $('.box li').eq(n - 1).children('i').addClass('check-this').parent().siblings().children('i').removeClass('check-this')
                i--;
            }
        }
        //手机触摸效果
        var startX, endX, moveX;

        function touchStart(event) {
            var touch = event.touches[0];
            startX = touch.pageX;
        }

        function touchMove(event) {
            var touch = event.touches[0];
            endX = touch.pageX;
        }

        function touchEnd(event) {
            moveX = startX - endX;
            if (moveX > 50) {
                moveNext(i);
            } else if (moveX < -50) {
                moveLast(i);
            }
        }
        document.getElementById("slides").addEventListener("touchstart", touchStart, false);
        document.getElementById("slides").addEventListener("touchmove", touchMove, false);
        document.getElementById("slides").addEventListener("touchend", touchEnd, false);


    });
</script>

</html>